<template>
  <Col v-show="!item.hidden" v-bind="colAttrs">
    <div v-if="!item.itemSlot" :class="prefixCls">
      <label :class="`${prefixCls}-label`" :style="{ color: item.labelColor }">
        <slot :name="item.labelSlot">{{ item.label }}{{ hasColon(item) }}</slot>
      </label>
      <label :class="[`${prefixCls}-value`]" :style="{ color: item.valueColor }">
        <slot :name="item.valueSlot">{{ getColValue(item) }} </slot>
      </label>
    </div>
    <div v-else>
      <slot :name="item.itemSlot">{{ item.label }}</slot>
    </div>
  </Col>
</template>

<script setup>
import { useComputed } from './utils/useComputed';
import { useDependencyInjection } from '../../utils/useDependencyInjection';

const prefixCls = 'sh-description-col';
const props = defineProps({
  item: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { getInject } = useDependencyInjection();
const { desc } = getInject(['desc']);

const { colAttrs, hasColon, getColValue } = useComputed(props, desc);
</script>
